<script setup lang="ts">
import { ref } from 'vue';

defineOptions({ name: 'DiagnosticProcess' });

// 诊断流程步骤
const steps = ref([
  {
    id: 1,
    title: '数据收集',
    description: '收集系统运行数据和日志信息',
    status: 'completed',
    icon: 'mdi-database'
  },
  {
    id: 2,
    title: '异常检测',
    description: '通过AI算法检测系统异常行为',
    status: 'completed',
    icon: 'mdi-alert-circle'
  },
  {
    id: 3,
    title: '根因分析',
    description: '分析异常产生的根本原因',
    status: 'completed',
    icon: 'mdi-search'
  },
  {
    id: 4,
    title: '修复方案生成',
    description: '自动生成系统修复建议',
    status: 'processing',
    icon: 'mdi-lightbulb'
  },
  {
    id: 5,
    title: '自动化修复',
    description: '根据方案自动修复系统问题',
    status: 'pending',
    icon: 'mdi-wrench'
  }
]);

// 处理步骤状态
function getStepStatusClass(status: string) {
  switch (status) {
    case 'completed':
      return 'text-success';
    case 'processing':
      return 'text-primary';
    case 'pending':
      return 'text-gray-400';
    default:
      return '';
  }
}

function getStepIcon(status: string) {
  switch (status) {
    case 'completed':
      return 'mdi-check-circle';
    case 'processing':
      return 'mdi-cog';
    default:
      return '';
  }
}

function getStepBgClass(status: string) {
  switch (status) {
    case 'completed':
      return 'bg-success/10';
    case 'processing':
      return 'bg-primary/10';
    case 'pending':
      return 'bg-gray-100';
    default:
      return '';
  }
}

function getProgress() {
  if (!steps.value) return 0;
  const completedSteps = steps.value.filter(step => step.status === 'completed').length;
  const totalSteps = steps.value.length;
  return (completedSteps / totalSteps) * 100;
}
</script>

<template>
  <NCard :bordered="false" class="card-wrapper">
    <div class="flex items-center justify-between mb-6">
      <h3 class="text-xl font-semibold flex items-center">
        <SvgIcon icon="mdi-cogs" class="mr-2 text-primary" />
        智能诊断流程
      </h3>
      <NBadge :type="steps.value?.some(step => step.status === 'processing') ? 'primary' : 'success'" :value="(steps.value?.filter(step => step.status === 'completed').length || 0) + '/' + (steps.value?.length || 0)" />
    </div>

    <NProgress :percentage="getProgress()" :status="steps.value?.some(step => step.status === 'processing') ? 'primary' : 'success'" class="mb-8" />

    <div class="relative">
      <!-- 连接线 -->
      <div class="absolute top-10 left-10 h-full w-0.5 bg-gray-200 -z-10"></div>

      <!-- 步骤列表 -->
      <div class="space-y-8">
        <div v-for="step in steps" :key="step.id" class="flex items-start">
          <div class="flex-shrink-0 mr-6 relative">
            <div :class="`w-20 h-20 rounded-full flex items-center justify-center ${getStepBgClass(step.status)} border-4 border-white shadow-sm`">
              <template v-if="step.status === 'completed'">
                <SvgIcon icon="mdi-check-circle" class="text-success w-10 h-10" />
              </template>
              <template v-else-if="step.status === 'processing'">
                <SvgIcon icon="mdi-cog" class="text-primary w-10 h-10 animate-spin" />
              </template>
              <template v-else>
                <SvgIcon :icon="step.icon" class="text-gray-400 w-10 h-10" />
              </template>
            </div>
          </div>

          <div class="flex-1 bg-white p-6 rounded-lg shadow-sm border border-gray-100">
            <div class="flex items-center justify-between mb-2">
              <h4 :class="`text-lg font-medium ${getStepStatusClass(step.status)}`">{{ step.title }}</h4>
              <span :class="`text-sm px-2 py-1 rounded-full ${getStepStatusClass(step.status)} bg-opacity-10`">{{
                step.status === 'completed' ? '已完成' : step.status === 'processing' ? '处理中' : '待处理'
              }}</span>
            </div>
            <p class="text-gray-500">{{ step.description }}</p>

            <div v-if="step.status === 'completed' && step.id === 3" class="mt-4 p-4 bg-gray-50 rounded-lg border border-gray-200">
              <h5 class="font-medium mb-2">根因分析结果:</h5>
              <p class="text-sm text-gray-600">
                检测到GPU内存泄漏问题，主要原因是模型加载后未正确释放资源。建议升级到最新版本的驱动程序，并优化模型加载流程。
              </p>
            </div>

            <div v-if="step.status === 'processing'" class="mt-4">
              <NProgress type="line" status="primary" :percentage="65" />
              <p class="text-sm text-gray-500 mt-1">预计还需 2 分钟完成</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </NCard>
</template>

<style scoped></style>